{extend name="index/index" /}
{block name="main"}

<div class="content-page">
    <div class="content">
        <!-- Page Heading Start -->
        <div class="page-heading">
            <h1><i class='fa fa-table'></i>栏目管理</h1>
        </div>
        <!-- Page Heading End-->                <!-- Your awesome content goes here -->
        <div class="row">

            <div class="col-md-12">
                <div class="widget">
                    <div class="widget-header transparent">
                        <h2><strong>Sortable</strong> Table</h2>

                    </div>
                    <div class="widget-content">
                        <div class="table-responsive">
                            <table data-sortable class="table">
                                <thead>
                                <tr>
                                    <th>栏目ID</th>
                                    <th>栏目名称</th>
                                    <th>操作</th>
                                </tr>
                                </thead>

                                <tbody>
                                {volist name="list" id="vo"}
                                <tr>
                                    <td>{$vo.column_id}</td>
                                    <td>{$vo.colname}</td>
                                    <td>
                                        <!--<a href="{:url('admin/column/edit',['id'=>$vo['column_id']])}"  data-id={$vo.column_id} class="btn btn-primary up-btn">修改</a>-->
                                        <button data-id="{$vo.column_id}"  class="btn btn-primary up-btn" data-toggle="modal" data-target="#myModal">修改</button>
                                            <button data-id="{$vo.column_id}"  class="btn btn-danger del-btn">删除</button>
                                    </td>
                                </tr>

                                <!-- Modal -->
                                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                                <h4 class="modal-title" id="myModalLabel">栏目管理</h4>
                                            </div>
                                            <div class="modal-body">
                                                <input type="hidden" class="column_id" name="column_id" value="">
                                                栏目名称:<input type="text" class="colname" name="colname" value="">
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
                                                <button type="button" class="btn btn-success upcol-btn">确认</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {/volist}
                                </tbody>
                            </table>
                            {$list->render()}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{js href="/static/index/js/jquery.min.js"}
{js href="/static/index/js/toastr.min.js"}
{css href="/static/index/css/toastr.min.css"}
<script>
    //删除栏目
    $(function () {
        // 触发删除用户
        $('.del-btn').click(function () {
            var id = $(this).attr('data-id');
            if (confirm('您确定要 [ 删 除 ] 该栏目吗?')) {
                var obj = $(this).parents('tr');
                $.ajax({
                    type: 'delete',
                    url: '/admin/column/delete/id/' + id + '.html',
                    dataType: 'json',
                    success: function (data) {
                        if (data.status) {
                            toastr.success(data.info);
                            obj.remove();
                        } else {
                            toastr.error(data.info);
                        }
                    },
                    error: function () {
                        alert('AJAX执行失败!');
                    }
                });

            }
        });
    });

    //修改栏目
    $(function () {
        // 触发删除用户
        $('.up-btn').click(function () {
            var id = $(this).attr('data-id');
            colname(id);
        });
    });
    function colname(id){
        var info = 'id=' + id;

        $.ajax({
            type:'post',
            url:'/admin/Column/edit',
            data:info,
            dataType:'json',
            success:function (data){
                var id = $('.column_id').val(data.column_id);
                var name = $('.colname').val(data.colname);
            },
            error:function (){
                alert('AJAX执行失败!');
            }
        });
    }
    $('.upcol-btn').click(function (){
            var id = $('.column_id').val();
            var name = $('.colname').val();

            upcolname(id,name);
        });
    function upcolname(id,name){
        var info = 'id=' + id + '&' + 'colname=' + name;

        $.ajax({
            type:'post',
            url:'/admin/Column/update',
            data:info,
            dataType:'json',
            success:function (data){
                if(data.status){
                    toastr.success(data.info);
                    setTimeout(function (){window.location.reload();},1000);
                }else{
                    toastr.error(data.info);
                    setTimeout(function (){window.location.reload();},1000);
                }
            },
            error:function (){
                alert('AJAX执行失败!');
            }
        });
    }
    toastr.options = {
        closeButton: true,// 是否显示关闭按钮
        progressBar: true,// 实现显示计时条
        timeOut: "3000",// 自动关闭时间
        positionClass: "toast-top-right"// 提示位置
        // positionClass: "toast-top-full-width"// 提示位置
        // toast-top-full-width 顶端，宽度铺满整个屏幕
        // toast-top-right  顶端右边
    };

</script>
{/block}